// stylelint-disable declaration-no-important

// Wagging animation
@keyframes tail-wag {
    from {
        transform: rotate(-3deg);
    }

    to {
        transform: rotate(7deg);
    }
}

.sidebar-wagtail-branding {
    $root: &;
    position: relative;
    display: block;
    align-items: center;
    color: #aaa;
    -webkit-font-smoothing: auto;
    margin: 4.5em auto 2.5em;
    text-align: center;
    width: 100px;
    height: 100px;
    transition: transform 150ms cubic-bezier(0.28, 0.15, 0, 2.1), width 150ms ease, height 150ms ease;

    &:hover {
        color: $color-white;
        transform: rotate(4deg);
    }

    // Reduce overall size when in slim mode
    .sidebar--slim & {
        width: 40px;
        height: 40px;
    }

    // Remove background on 404 page
    .page404__bg & {
        background-color: transparent;
    }

    // Set wagging styles
    &--wagging {
        &:hover {
            transform: rotate(8deg);
            transition: transform 1.2s ease;

            #{$root}__icon {
                // stylelint-disable max-nesting-depth
                &[data-part='tail'] {
                    animation: tail-wag 0.09s alternate;
                    animation-iteration-count: infinite;
                }

                // TODO: Fix legacy specificity issues
                &[data-part='eye--open'] {
                    display: none !important;
                }

                &[data-part='eye--closed'] {
                    display: inline !important;
                }
            }
        }
    }

    // Bird wrapper
    &__icon-wrapper {
        margin: auto;
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #3a3a3a;
        border-radius: 50%;
        transition: width 150ms ease, height 150ms ease;

        .sidebar--slim & {
            width: 40px;
            height: 40px;
        }

        .page404__bg & {
            width: auto;
            height: auto;
            position: static;
        }
    }

    // Bird icons
    &__icon {
        display: block;
        left: 0;
        top: 0;
        width: 70%;
        height: 70%;
        position: absolute;
        margin: auto;
        bottom: 0;
        right: 0;

        // TODO: Fix legacy specificity issues
        &[data-part='eye--open'] {
            display: inline !important;
        }

        &[data-part='eye--closed'] {
            display: none !important;
        }
    }
}
